<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { Popup } from "vant";

export default defineComponent({
    components: {
        [Popup.name]: Popup,
    },
    setup() {
        const open = ref(false);
        const announcement = ref({});
        const title = ref()
        const show = (item, Title) => {
            open.value = true;
            announcement.value = item;
            title.value = Title
        };
        const onClickLeft = () => history.back();

        return {
            open,
            announcement,
            title,
            show,
            onClickLeft
        };
    },
});
</script>
<template>
    <!-- 右侧弹出 -->
    <van-popup v-model:show="open" position="right" close-on-popstate close-icon-position="top-left" teleport="body"
        :style="{ width: '100%', height: '100%', background: '#ffffff' }">
        <van-nav-bar :title="$t(title)" :left-text="$t('layout.return')" left-arrow @click-left="onClickLeft" />

        <div class="content-info">
            <div class="title ">{{ announcement.Title }}</div>
            <div class="mark">
                <div>
                    <p><van-icon name="underway-o" />{{ announcement.NewsTime?.substring(0, 10) }}</p>
                    <!-- <p>{{ announcement.Author }}</p> -->
                </div>
                <!-- <p><van-icon name="browsing-history-o" />{{ announcement.ReadCount }}</p> -->
            </div>
            <div class="content" v-html="announcement.Content"></div>
        </div>
    </van-popup>
</template>
<style lang="less" scoped>
.content-info {
    padding: 20px 15px;

    .title {
        font-size: 24px;
        font-weight: bold;
    }

    .mark {
        margin-top: 15px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 400;
        color: #909399;
        border-bottom: 1px solid rgba(237, 239, 242, 1);

        div {
            display: flex;
            align-items: center;
        }

        p {
            margin-right: 12px;
            align-items: center;
            display: flex;
            align-items: center;

            .van-icon {
                margin-right: 4px;
                font-size: 14px;
            }
        }
    }

    .content {
        margin-top: 20px;
        line-height: 13px;
        line-height: 22px;
        font-size: 13px;
        white-space: pre-wrap;

        &:deep(img) {
            max-width: 100%;
        }


        &:deep(.ql-indent-1) {
            text-indent: 26px;
        }
    }
}
</style>